<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- 卡片视图 -->
      <!-- 搜索框 -->
      <el-row>
        <el-col :span="10">
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search" @click="getOrdersList"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 订单列表 -->
      <el-table :data="ordersList" border stripe>
        <el-table-column label="#" type="index" align="center"></el-table-column>
        <el-table-column prop="order_number" label="订单编号" align="center" width="300%"></el-table-column>
        <el-table-column prop="order_price" label="订单价格" align="center" width="150%"></el-table-column>
        <el-table-column prop="pay_status" label="是否付款" align="center" width="150%">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.pay_status=='1'" type="success">已付款</el-tag>
            <el-tag v-else type="danger">未付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" align="center" width="100%"></el-table-column>
        <el-table-column label="下单时间" align="center" width="200%">
          <template slot-scope="scope">{{scope.row.create_time|timeFormat}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-tooltip content="修改订单地址">
              <el-button
                icon="el-icon-edit"
                type="primary"
                size="mini"
                @click="showEditdialogVisible=true"
              ></el-button>
            </el-tooltip>

            <el-tooltip content="物流消息">
              <el-button
                icon="el-icon-location"
                type="success"
                size="mini"
                @click="showProcessdialog(scope.row.order_id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[2, 5, 8, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <!-- 修改地址对话框 -->
    <el-dialog
      title="修改地址"
      :visible.sync="showEditdialogVisible"
      width="40%"
      @close="delEditDialgForm"
    >
      <el-form :model="editOrdersForm" :rules="rules" ref="editAddressRef">
        <el-form-item label="省市区/县" prop="address1" label-width="100px">
          <!-- 省市区级联选择器 -->
          <!-- 我选择安装依赖 -->
          <!-- element-china-area-data -->
          <el-cascader
            class="addressSel"
            size="large"
            :options="addressOption"
            v-model="selectedOptions"
            @change="handleSelectAddress"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址" prop="address2" label-width="100px">
          <el-input v-model="editOrdersForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEditdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showEditdialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 物流进度对话框 -->
    <!-- 用到了时间线组件 这个组件比较新，要确认项目的element插件版本是不是最新的-->
    <el-dialog title="物流进度" :visible.sync="showProcessdialogVisible" width="40%">
      <el-timeline :reverse="false">
        <el-timeline-item
          v-for="(item, index) in processList"
          :key="index"
          :timestamp="item.time"
        >{{item.context}}</el-timeline-item>
      </el-timeline>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showProcessdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showProcessdialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionData } from 'element-china-area-data'
export default {
  data() {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 8,
        user_id: '',
        pay_status: '',
        is_send: '',
        order_fapiao_title: '',
        order_fapiao_company: '',
        order_fapiao_content: '',
        consignee_addr: ''
      },
      total: 0,
      ordersList: [],
      // 修改订单地址
      editOrdersForm: {},
      showEditdialogVisible: false,
      rules: {
        address1: [
          {
            required: true,
            message: '请选择省市区',
            trigger: 'blur'
          }
        ],
        address2: [
          {
            required: true,
            message: '请填写详细地址',
            trigger: 'blur'
          }
        ]
      },
      // 我装了中国地区依赖
      addressOption: regionData,
      selectedOptions: [],
      // 物流进度
      showProcessdialogVisible: false,
      // 物流信息
      processList: []
    }
  },
  created() {
    this.getOrdersList()
  },
  methods: {
    handleSizeChange(val) {
      this.queryInfo.pagesize = val
      this.getOrdersList()
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val
      this.getOrdersList()
    },
    async getOrdersList() {
      // 获取订单列表
      const { data: ret } = await this.$http.get('orders', {
        params: this.queryInfo
      })
      if (ret.meta.status !== 200) return this.$message.error(ret.meta.msg)
      console.log(ret)
      this.ordersList = ret.data.goods
      this.total = ret.data.total
    },
    handleSelectAddress() {
      // 选择地区改变时
      console.log(this.selectedOptions)
    },
    delEditDialgForm() {
      // 清空表单
      console.log(123)
      this.$refs.editAddressRef.resetFields()
    },
    async showProcessdialog() {
      // 显示物流对话框 凭借物流单号查物流
      this.showProcessdialogVisible = true
      const { data: ret } = await this.$http.get('/kuaidi/' + 1106975712662)
      if (ret.meta.status !== 200) return this.$message.error(ret.meta.msg)
      console.log(ret.data)
      this.processList = ret.data
    }
  }
}
</script>

<style lang='less' scoped>
.addressSel {
  width: 100%;
}
.el-timeline {
  font-size: 12px;
  height: 100%;
}
</style>
